<script setup>

import router from "../../../../router";
import MyNav from "../../../../components/MyNav.vue";
import MyHead from "../../../../components/MyHead.vue";
import MyTable from "../../../../components/MyTable.vue";
import MyPager from "../../../../components/MyPager.vue";
import {onMounted, reactive, ref} from "vue";
import {pageApi} from "../../../../api/axios.js";
import {isNotEmpty, isNotNull} from "../../../../util/index.js";
import {myPage} from "../../../../util/request.js";
import {notYet} from "../../../../util/index.js";
import {deleteApi,deleteBatchApi} from "../../../../api/axios.js";
import {MINIO_AVATAR, MINIO_COURSE_COVER} from "../../../../const/index.js";



/* ===================== 页面常量 ===================== */

//路径导航
const navItems =[
  {icon: 'User', label: '订单管理'},
  {icon: 'Flag',label: '订单列表', url: '/Order'},
  {icon: 'Flag', label:'订单明细列表'},
];

//页面头
const headItems =[
  {type: 'ipt',span:5,placeholder: '按标题搜索',callback: pageLikeTitle},
];

//表格列
const columns =[
  { label: '订单ID', prop: 'fkOrderId',  width: 130, sortable: false },
  { label: '课程ID',prop:'fkCourseId',width:80},
  { label: '课程标题',prop:'courseTitle',width:180},
  { label: '课程封面图',prop:'courseCover',type: 'img',minio : MINIO_COURSE_COVER},
  { label: '课程单价（元）',prop:'coursePrice',width:180},
];


/* ===================== 分页查询 ===================== */

//表格行+分页+菜单标题
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, callback: page});
let title = ref();

/**
 * 分页查询
 * 1. 定义分页基础配暨，包括 records，pageInfo，api，params 等。
 * 2.附加分页查询条件，如标题等。
 * 3.异步发送分页查询请求。
 * 4.将pTitle融入表格数据的母一项，方便进行展示。
 *
 * @param pageNum 当前第儿页，默认1
 * @param pageSize 每页多少条，默认5
 * @returns {Promise<void>}
 */

async function page(pageNum = pageInfo['pageNum'],
                    pageSize = pageInfo['pageSize']) {
  let config={
    records, pageInfo,
    api:pageApi,
    params: {pageNum, pageSize},
    args: {module: 'orderDetail'},
  }
  if (isNotEmpty(title.value)) config['params']['title'] = title.value;
  await myPage(config);

}

/* ===================== 按菜单标题模糊查询 ===================== */

/**
 * 按茶单标题模橱查询
 * 1.将额入框中的值赋值给分页条件字段变量。
 * 2.重新发送分页请求。
 * @param val 繁入框中的值
 */
function pageLikeTitle(val) {
  if (isNotNull(val) || title.value) {
    title.value = val;
    page();
  }
}


/* ===================== 加载函数 ===================== */

onMounted(() => page());

</script>


<template v-if="records">
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="orderDetail"
            insert-page="/orderDetailInsert"
            update-page="/orderDetailUpdate"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="page"
            :excel-api="notYet"
            :records="records"
            :columns="columns"/>
  <my-pager :page-info="pageInfo"/>
</template>

<style scoped lang="scss">

</style>